<template>
	<div class="Polular_content">
		<!-- <div class="header">
			   <van-nav-bar
				  title="宣教"
				  style="background: #FFFFFF;"
				  @click-left="onClickLeft"
				 />

		</div> -->

		<!--轮播-->
		<div class="lun_bo" style="width: 100%;height:25.8vh;">
			<van-swipe :autoplay="3000">
			  <van-swipe-item v-for="(banner, i) in banners"
                        :key="i">
			    <img v-lazy="banner.ban_pic_url"
               style="height:100%;width:100%;"
               @click="to_banner_detail(banner.bannaerId,banner.type)"/>
			  </van-swipe-item>
			</van-swipe>
		</div>
  	  <div>
     	  <ban-veriFy></ban-veriFy>
      </div>
      <!--列表--->
       <van-tabs @click="onClick">
		 <van-tab v-for="(index,i) in tab_item" :title="index.name" :key="i">
			<div  id="list-content">
            <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
              <van-list
                v-model="loading"
                :finished="finished"
                @load="onLoad"
                finished-text="没有更多了"
                :immediate-check="immediate"
                :offset="10"
              >
                <div>
                  <div class="Assen_action"
                       v-for="(item, i) in items"
                       :key="i"
                       @click="to_detail_edu(item)"
                  >
                    <div class="Assen_item_one" style="position: relative;">
                      <img :src="item.edu_pic_url"/>
                      <!-- dati.png/shipin.png/wenzhang.png 左上角图标-->

                      <img v-if="item.ctdisk ==1" src="../../assets/shipin.png" style="width: 34px;height: 17px;position: absolute;left: 0;top: 0;">
                      <img v-if="item.ctdisk ==2" src="../../assets/wenzhang.png" style="width: 34px;height: 17px;position: absolute;left: 0;top: 0;">
                      <img v-if="item.ctdisk ==3" src="../../assets/dati.png" style="width: 34px;height: 17px;position: absolute;left: 0;top: 0;">
                    </div>
                    <div style="margin-left: 3vw;">
                      <p class="p_content_con">{{item.title}}</p>
                      <p class="p_Assion_july">
                          <span>{{item.subhead}}</span>
                      </p>
                    </div>
                  </div>
                </div>



              </van-list>
            </van-pull-refresh>

          </div>
        </van-tab>

       </van-tabs>

	</div>

</template>
<script>
// require styles
import BanVeriFy from '@/components/BanVeriFy';
import { Dialog } from 'vant';
export default {
	data(){
		return{
		    page:0,
		    user:'',
        banners:[],
        items:[],
			  active_boolen:true,
			  tab_item:[{'name':'科教'}],
			  active:'',
        page:0,
        isLoading:false,
        loading: false,   //是否处于加载状态
        finished: false, //是否已加载完所有数据
        temp_event:0,
        immediate:false,

		}
	},
    mounted(){
        console.log(process.env.API_HOST);

        let local_user = localStorage.getItem('user');
        if(local_user != undefined && local_user != "undefined"){
            let user = JSON.parse(local_user);
            this.user = user;

            if(this.user.mechanism =='0'){
              this.tab_item.push({'name':'学校'});
            }else if(this.user.mechanism =='1'){
                this.tab_item.push({'name':'政府'});
            }else if(this.user.mechanism =='2'){
                this.tab_item.push({'name':'企业'});
            }else if(this.user.mechanism =='3'){
                this.tab_item.push({'name':'社区'});
            }else if(this.user.mechanism =='4'){
                this.tab_item.push({'name':'其他'});
            }else if(this.user.mechanism =='5'){
                this.tab_item.push({'name':'医疗机构'});
            }else if(this.user.mechanism =='6'){
                this.tab_item.push({'name':'部队'});
            }

        }else{
            this.user ={};
            this.user.userId='';
        }

        const that = this;
        that.temp_event =0;
        that.isLoading = true;
        that.page = 0;
        that.items=[];
        that.getEucation_banner(0);

    },
	methods: {
	    onClickLeft() {
	          this.$router.back(-1);
		  },
      to_banner_detail(bannaerId,type){
          let that = this;
          if(type == '1'){
              that.$router.push({
                  path: '/h5',query:{url:"/h5/banner_detail?aId="+bannaerId}
              })
          }

      },
      to_detail_edu(item){

          //1：视频 2：文章 3：题库
          if(item.ctdisk == 1){
            //跳转到视频
              const  that = this;
              that.$router.push({
                  path: '/videoDetail',query:{video_url:item.video_url,edu_pic_url:item.edu_pic_url,userId:that.user.userId,integral:item.integral,educationId:item.educationId}
              })

          }else if(item.ctdisk == 2){
              //跳转到文章
              const  that = this;
              that.$router.push({
                  path: '/h5',query:{url:"/h5/education_detail?educationId="+item.educationId+"&userId="+that.user.userId}
              })

          }else if(item.ctdisk == 3){
            //跳转到题库
              const that = this;
              if(that.user.userId ==''){
                  Dialog.confirm({
									    title: '',
									    message: '请您先进行登录'
									}).then(() => {
									    // on confirm
									    this.$router.push({
									        path:'/'
									    })
									}).catch(() => {
									    // on cancel
									});
                  return false;
              }
              that.$router.push({
                  path: '/answer',query:{educationId:item.educationId,userId:that.user.userId}
              })
          }




      },
      //科普下的数据
      getEucation_banner(type){
          const that = this;
          let param = "page="+that.page+"&userId="+that.user.userId;
          that.$sendRequest('/education/getEucation_banner',param).then(function(res){
              console.log(res.data);
              that.isLoading = false;
              that.loading = false;
              if(res.data.code ==0){
                  that.banners = res.data.result.bannerList;
                  if(res.data.result.eucationList.length < 10){
                      that.finished = true;
                  }
                  for(var i = 0;i<res.data.result.eucationList.length;i++){
                      that.items.push(res.data.result.eucationList[i]);
                  }
                  if(type ==0){
                      that.finished = false;
                  }
              }
              console.log(that.items);
          })
      },
      //（学校）下的数据
      get_org_eucation(type){
          const that = this;
          let param = "page="+that.page+"&userId="+that.user.userId;
          that.$sendRequest('/education/get_org_eucation',param).then(function(res){
              console.log(res.data);
              that.isLoading = false;
              that.loading = false;
              if(res.data.code ==0){
                  if(res.data.result.eucationList.length < 10){
                      that.finished = true;
                  }
                  for(var i = 0;i<res.data.result.eucationList.length;i++){
                      that.items.push(res.data.result.eucationList[i]);
                  }
                  if(type ==0){
                      that.finished = false;
                  }

              }

          })
      },
      onClick(event) {
          if(event == 0){
              const that = this;
              that.tem_content = true;
              that.temp_event =0;
              that.isLoading = true;
              that.page = 0;
              that.items=[];
              that.getEucation_banner(0);
          }else if(event == 1){
              const that = this;
              that.tem_content = false;
              that.temp_event =1;
              that.isLoading = true;
              that.page = 0;
              that.items=[];
              that.get_org_eucation(0);
          }

      },
      onRefresh(){
          console.log("下拉刷新");
          const  that = this;
          that.isLoading = true;
          that.page = 0;
          that.items=[];
          if(that.temp_event ==0){
              that.getEucation_banner(0);
          }else if(that.temp_event ==1){
              that.get_org_eucation(0);
          }


      },
      onLoad() {
          console.log("上拉加载");
          console.log(this.finished);
          if(this.items.length != 0){
              this.page = this.page+1;
          }
          if(this.temp_event ==0){
              this.getEucation_banner(1);
          }else if(this.temp_event ==1){
              this.get_org_eucation(1);
          }
      }


		},

	    components: {

	   	   BanVeriFy

	  	 }
    }
</script>
<style scoped="scoped">
    .Polular_content >>> .van-tabs__wrap {
        height: 44px;
        margin-left: 3vw;
        width: 30vw !important;
    }
	.Polular_content >>> .van-tabs__line{
		background: #4C9FFD;
        /* width: 15vw !important;
        transform: translateX(15vw) translateX(-50%) !important; */
	}
    .Polular_content >>> .van-hairline--top-bottom::after{
        border: none !important;
    }
    [class*=van-hairline]::after{
        border: 0 solid #ffffff;
    }
	.list-content{
        margin-top:46px;
        overflow:scroll;
    }
    .list-item{
        text-align:center;
    }
	.lun_bo{
		height: 24vh;
	}
	.header >>> .van-nav-bar__title{
		color: #000;
	}
	.lun_bo >>>.van-swipe{
		height: 100%;
	}
	.data_picker_color{
		color: #FF4242;
		font-size: 20px;
		margin-left: 2vh;
	}
	.uploader_img{
		margin-top: 2vh;
		display: flex;
		justify-content: space-between;
		margin: 12px;
	}
	.Assen_action{
		padding: 0;
		margin: 2vh;
		display: flex;
		justify-content: flex-start;
	}
	.Assen_action img{
		width: 28vw;
		height: 12vh;

	}
	.Assen_action p{

		text-align: left;
		margin: 0;
		padding: 0;
		font-size: 12px;
	}


.Assen_action .p_content_con{
	font-size: 15px;
	text-align: left;
	margin-top: 1.1vh;
}
.Assen_item_one img {
	margin-right: 2vw;
}
.p_Assion_july{

	color: #999999;
	margin-top: 0.5vh !important;
}



</style>
